<script setup>
import { ref } from "vue";
import Popup from "./popup.vue";

</script>

<template>

  <div class="header">
    <!-- 搜搜 -->
    <div class="header-search">
      <div class="search-list">
        <i class="">搜索</i>
        <input type="text" placeholder="请输入书名、作者">
      </div>
    </div>
    
    <!-- 分类 -->
    <van-sticky>
      <ul class="header-tabs">
        <li>推荐</li>
        <li>男生</li>
        <li>女生</li>
        <li>图书</li>
        <li>新书</li>
        <li>最新上架</li>
      </ul>
    </van-sticky>

    <!-- 背景图 -->
    <div class="header-img">
      <span :style="{ fontSize: '48px', color: 'blue',fontWeight:'bolder' }">阅读伴成长</span>
      <div class="header-img-bottom">
        <span :style="{ fontSize: '16px', color: '#eee',fontWeight:'bolder' }">阅/生/活</span><span :style="{ fontSize: '16px', color: '#eee',marginLeft:'20px',fontWeight:'bolder' }">越/美/好</span>
      </div>
    </div>

    <van-row justify="space-around">
      <van-col span="2" ><h4>排行榜</h4></van-col>
      <van-col span="18"></van-col>
      <van-col span="4"><Popup /></van-col>
    </van-row>

  </div>
</template>

<style scoped>

</style>


<style>

.header{
  width: 760px;
}

/* 搜索 */
.header-search{
  background-color: #F8D447;
  padding: 10px;
}

/* 搜索框外围 */
.search-list{
  background-color: rgba(255, 255,255, .5);
  border-radius: 5px;
  padding: 6px;
}

/* 搜索输入框 */
.header-search input{
  border: 0;
  background-color: transparent;
  margin-left: 10px;
  width: 82%;
  height: 100%;
  padding: 6px;
}

/* 提示内容颜色 */
.header-search input::placeholder,
.header-search i
{
  color: #999;
}

/* -------------------------------------分类标签------------------------------------- */
.header-tabs{
  display: flex;
  list-style-type: none;
  background-color: #F8D447;
  font-weight: 700;
  font-size: 16px;
  padding: 10px;
  justify-content: space-between;
  color: #6f601b;
  margin-top: 0px;
}

.header-img{
  background-color: #F8D447;
  height: 100px;
  text-align: center;
}

.header-img-bottom{
  border-radius: 5px;
}

.charts{
  display: flex;
  justify-content: space-between;
  margin-top: 0px;
  padding: 10px;
}

.charts h4{
  font-size: 16px;
}
</style>
